package pri.jz.keeper.ui.view

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.viewmodel.compose.viewModel
import pri.jz.keeper.ui.login.LoginViewModel

/**
 *Author by: JZ
 *Email: 2451756617@qq.com
 *PS:登录界面
 */
@Composable
fun LoginView(
    viewModel: LoginViewModel = viewModel()
) {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {

        val uiState by viewModel.loginUiState.collectAsState()
        val (tipRes,numberRes,passwordRes,loginRes,registerRes) = createRefs()
        NetworkLostSheet()
        Text(
            "Keeper",
            fontSize = 30.sp,
            modifier = Modifier.constrainAs(tipRes){
                start.linkTo(numberRes.start)
                bottom.linkTo(numberRes.top)
            },
            color = Color.Black,
            fontStyle = FontStyle.Italic
        )
        OutlinedTextField(
            value = viewModel.numberText,
            onValueChange = {viewModel.numberTextChange(it)},
            singleLine = true,
            placeholder = { Text("账号") },
            shape = RoundedCornerShape(15.dp),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth(0.75f)
                .padding(top = 80.dp, bottom = 32.dp)
                .constrainAs(numberRes){
                    top.linkTo(parent.top,140.dp)
                    centerHorizontallyTo(parent)
                },
            isError = uiState.isNumberError,
            label = { Text(uiState.numberLabel) },
            leadingIcon = {
                Icon(
                    painter = painterResource(pri.jz.keeper.R.drawable.img_username),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
        )
        OutlinedTextField(
            value = viewModel.passwordText,
            onValueChange = {viewModel.passwordTextChange(it)},
            placeholder = { Text("密码") },
            singleLine = true,
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            visualTransformation = PasswordVisualTransformation(),
            leadingIcon = {
                Icon(
                    painterResource(pri.jz.keeper.R.drawable.img_password),
                    contentDescription = null,
                    modifier = Modifier.size(16.dp)
                )
            },
            isError = uiState.isPasswordError,
            label = { Text(uiState.passwordLabel) },
            modifier = Modifier.
            constrainAs(passwordRes){
                start.linkTo(numberRes.start)
                top.linkTo(numberRes.bottom)
            }.fillMaxWidth(0.75f)
                .padding(top = 50.dp),
            shape = RoundedCornerShape(15.dp),
        )
        TextButton(
            onClick = { viewModel.register() },
            modifier = Modifier.constrainAs(registerRes) {
                top.linkTo(passwordRes.bottom)
                end.linkTo(passwordRes.end)
            }.padding(top = 10.dp)
        ) {
            Text("注册账号")
        }
        MainButton(
            modifier = Modifier.padding(top = 132.dp).fillMaxWidth(0.6f)
                .height(54.dp).
                constrainAs(loginRes){
                    top.linkTo(passwordRes.bottom)
                    centerHorizontallyTo(parent)
                },
            text = "登录",
        ) { viewModel.login() }
    }
}

@Preview
@Composable
fun LoginViewPriview() {
    LoginView()
}
